@charset "UTF-8";

$component-name: 'ui-tag';

// 按钮的高度
$tag-height-xss: 100upx;
$tag-height-large: 88upx;
$tag-height-base: 60upx;
$tag-height-small: 44upx;

$tag-font-size-mini: 10px;
$tag-font-size-small: 12px;
$tag-font-size-base: 14px;
$tag-font-size-large: 16px;

.ui-tag {
	display: inline-block;
	padding: 0.2em 0.8em;
	// height: $tag-height-base;
	width: auto;
	// line-height: $tag-height-base;
	justify-content: center;
	color: $color-text-base;
	border-radius: $border-radius-base;
	background-color: $fill-base;
	border-width: 1px;
	border-style: solid;
	border-color: $border-color-base;
	text-align: center;
	&-text {
		color: $color-text-base;
		font-size: $tag-font-size-base;
	}
	// -----------------------------------
	// --- Tag的颜色
	// ----------------------------------

	&.is-primary {
		color: $color-text-base-inverse;
		background-color: $brand-primary;
		border-width: 1rpx;
		border-style: solid;
		border-color: $brand-primary;
		.ui-tag--text {
			color: $color-text-base-inverse;
			font-size: $font-size-base;
		}
	}
	// 信息按钮
	&.is-info {
		color: $color-text-base-inverse;
		background-color: $brand-info;
		border-width: 1rpx;
		border-style: solid;
		border-color: $brand-info;
		.ui-tag--text {
			color: $color-text-base-inverse;
			font-size: $font-size-base;
		}
	}
	&.is-warning {
		color: $color-text-base-inverse;
		background-color: $brand-warning;
		border-width: 1rpx;
		border-style: solid;
		border-color: $brand-warning;
		.ui-tag--text {
			color: $color-text-base-inverse;
			font-size: $font-size-base;
		}
	}
	&.is-danger {
		color: $color-text-base-inverse;
		background-color: $brand-danger;
		border-width: 1rpx;
		border-style: solid;
		border-color: $brand-danger;
		.ui-tag--text {
			color: $color-text-base-inverse;
			font-size: $font-size-base;
		}
	}

	// -----------------------------------
	// --- Tag的大小
	// ----------------------------------
	&.is-large {
		// height: $tag-height-large;
		// line-height: $tag-height-large;
		font-size: $tag-font-size-large;
	}
	&.is-small {
		font-size: $tag-font-size-small;
	}
	&.is-mini {
		font-size: $tag-font-size-mini;
	}

	// -----------------------------------
	// --- 禁用状态
	// ----------------------------------

	&.is-disabled {
		color: $color-text-disabled;
		opacity: $opacity-disabled;
		cursor: not-allowed;
	}

	// -----------------------------------
	// --- Tag 形状圆角状态
	// ----------------------------------
	&.is-circle {
		border-radius: $tag-height-base / 2;

		&.is-large {
			border-radius: $tag-height-large / 2;
		}
		&.is-small {
			border-radius: $tag-height-small / 2;
		}
		&.is-xss {
			border-radius: $tag-height-xss / 2;
		}
	}
	// -----------------------------------
	// --- Tag 形状 mark 半圆角
	// ----------------------------------
	&.is-mark {
		border-top-right-radius: $tag-height-base / 2;
		border-bottom-right-radius: $tag-height-base / 2;

		&.is-large {
			border-top-right-radius: $tag-height-large / 2;
			border-bottom-right-radius: $tag-height-large / 2;
		}
		&.is-small {
			border-top-right-radius: $tag-height-small / 2;
			border-bottom-right-radius: $tag-height-small / 2;
		}
		&.is-xss {
			border-top-right-radius: $tag-height-xss / 2;
			border-bottom-right-radius: $tag-height-xss / 2;
		}
	}

	// -----------------------------------
	// --- Tag 是朴树的标签
	// ----------------------------------
	&.is-plain {
		&.is-primary {
			background-color: $fill-base;
			.ui-tag--text {
				color: $brand-primary;
			}
		}
		// 信息按钮
		&.is-info {
			background-color: $fill-base;
			.ui-tag--text {
				color: $brand-info;
			}
		}
		&.is-warning {
			background-color: $fill-base;
			.ui-tag--text {
				color: $brand-warning;
			}
		}
		&.is-danger {
			background-color: $fill-base;
			.ui-tag--text {
				color: $brand-danger;
			}
		}
	}
}
